<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>报废汇总--${site.name}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="${site.description}"/>
    <meta name="keywords" content="${site.keywords}"/>
    <meta name="author" content="${site.author}"/>
    <link rel="icon" href="${site.logo}">
    <link rel="stylesheet" href="${base}/static/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
    <link rel="stylesheet" href="${base}/static/css/user.css" media="all" />
</head>
<body class="childrenBody">
   <fieldset class="layui-elem-field">
    <legend>上周每工序卡体报废趋势和三个月FPC报废趋势</legend>
    <div style="width:50%;height: calc(46vh);margin:0 auto;float:left;">
         <div id="main3" style="height:100%;"></div>
        </div>
            <div style="width:50%;height: calc(46vh);margin:0 auto;float:right;">
           <div id="main2" style="height:100%;"></div>
          </div>
</fieldset> 
 <fieldset class="layui-elem-field">
    <legend>三个月卡体报废趋势和一年卡体报废趋势</legend>
    <div style="width:50%;height: calc(46vh);margin:0 auto;float:left;">
         <div id="main" style="height:100%;"></div>
        </div>
            <div style="width:50%;height: calc(46vh);margin:0 auto;float:right;">
           <div id="main4" style="height:100%;"></div>
          </div>
</fieldset> 
 <script type="text/javascript" src="${base}/static/echarts/echarts.min.js"></script>
 <script type="text/javascript" src="${base}/static/jquery-easyui-1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="${base}/static/layui/layui.js"></script>
<script type="text/javascript" src="${base}/static/js/tools.js"></script>

  <script type="text/javascript">

             //打开的时候获取后台数据 
   $(document).ready(function(){
	   
    	startRequest();
    }); 

    function startRequest(){
    	$.ajax({
    		url:'echart',
    		dataType:'json',
    		type:'post',
    		success:function(data){			
    			setOption_DailyScrap(getWeek(data.DailyScrap),getInput(data.DailyScrap),getScrap(data.DailyScrap),getScrapRate(data.DailyScrap));
      			setOption_FPCScrap(getFPCWeek(data.FPCScrap),getFPCInput(data.FPCScrap),getFPCScrap(data.FPCScrap),getFPCScrapRate(data.FPCScrap));
      			setOption_ProcessScrap(getProcessWeek(data.ProcessScrap),getProcessInput(data.ProcessScrap),getProcessScrap(data.ProcessScrap),getProcessScrapRate(data.ProcessScrap));
      			setOption_YearScrap(getYearWeek(data.YearScrap),getYearInput(data.YearScrap),getYearScrap(data.YearScrap),getYearScrapRate(data.YearScrap));
    		}
    	});
    }
    
 // 每月报废方法——————————————————————————————————————————————————————————————————————————
    function getYearWeek(data){
    	key=[];
    	for(var i=0;i<data.length;i++){
    		key[i] = data[i].weeks;
    	}
    	return key ;
    }
    function getYearInput(data){
    	key=[];
    	for(var i=0;i<data.length;i++){
    		key[i] = data[i].input;
    	}
    	return key ;
    }
    function getYearScrap(data){ 	
    	key=[];
    	for(var i=0;i<data.length;i++){
    		key[i] = data[i].scrap;
    	}
    	return key ;
    }
    
    function getYearScrapRate(data){ 	
    	key=[];
    	for(var i=0;i<data.length;i++){
    		key[i] = (((data[i].scrap) / (data[i].input))*100).toFixed(2);
    	}
    	return key ;
    }
    
        var YearmyChart = echarts.init(document.getElementById('main4'));
        function setOption_YearScrap(week,Input,scrap,rate){		
        option = {
        		   title: {
                       text: 'Card'
                   },
        	    tooltip: {
        	        trigger: 'axis',
        	        axisPointer: {
        	            type: 'cross',
        	            crossStyle: {
        	                color: '#999'
        	            }
        	        }
        	    },
        	    toolbox: {
        	        feature: {
        	            dataView: {show: true, readOnly: false},
        	            magicType: {show: true, type: ['line', 'bar']},
        	            restore: {show: true},
        	            saveAsImage: {show: true}
        	        }
        	    },
        	    legend: {
        	        data: ['scrap', 'Input', 'Scrap rate','Target']
        	    },
        	    xAxis: [
        	        {
        	            type: 'category',
        	            data: week,
        	            axisLabel: {                                           
        	            	interval:0,                                           
        	            	rotate:20                                        
        	            	},
        
        	            axisPointer: {
        	                type: 'shadow'
        	            }
        	        }
        	    ],
        	    yAxis: [
        	        {
        	            type: 'value',
        	            name: 'Input Qty',
        	            min: 0,
        	            max: 300000,
        	            interval: 30000,
        	            axisLabel: {
        	                formatter: '{value}'
        	            }
        	        },
        	        {
        	            type: 'value',
        	            name: 'Scrap Rate',
        	            min: 0,
        	            max: 10,
        	            interval: 1,
        	            axisLabel: {
        	                formatter: '{value}%'
        	            }
        	        }
        	    ],
        	    series: [
        	        {
        	            name: 'Scrap',
        	            type: 'bar',
        	            data: scrap
        	        },
        	        {
        	            name: 'Input',
        	            type: 'bar',
        	            data: Input
        	        },
        	        {
        	            name: 'Scrap rate',
        	            type: 'line',
        	            yAxisIndex: 1,
        	            data: rate
        	        },
        	        {
        	            name: 'Target',
        	            type: 'line',
        	            yAxisIndex: 1,
        	            data: [5,5,5,5,5,5,5,5,5,5,5,5,5]
        	        }
        	    ]
        	};
        YearmyChart.setOption(option);
        }
    
        
    // 上周报废工序方法——————————————————————————————————————————————————————————————————————————
    function getProcessWeek(data){
    	key=[];
    	for(var i=0;i<data.length;i++){
    		key[i] = data[i].weeks;
    	}
    	return key ;
    }
    function getProcessInput(data){
    	key=[];
    	for(var i=0;i<data.length;i++){
    		key[i] = data[i].input;
    	}
    	return key ;
    }
    function getProcessScrap(data){ 	
    	key=[];
    	for(var i=0;i<data.length;i++){
    		key[i] = data[i].scrap;
    	}
    	return key ;
    }
    
    function getProcessScrapRate(data){ 	
    	key=[];
    	for(var i=0;i<data.length;i++){
    		key[i] = (((data[i].scrap) / (data[i].input))*100).toFixed(2);
    	}
    	return key ;
    }
        var ProcessmyChart = echarts.init(document.getElementById('main3'));
        function setOption_ProcessScrap(week,Input,scrap,rate){		
        option = {
        		   title: {
                       text: 'Card'
                   },
        	    tooltip: {
        	        trigger: 'axis',
        	        axisPointer: {
        	            type: 'cross',
        	            crossStyle: {
        	                color: '#999'
        	            }
        	        }
        	    },
        	    toolbox: {
        	        feature: {
        	            dataView: {show: true, readOnly: false},
        	            magicType: {show: true, type: ['line', 'bar']},
        	            restore: {show: true},
        	            saveAsImage: {show: true}
        	        }
        	    },
        	    legend: {
        	        data: ['scrap', 'Input', 'Scrap rate']
        	    },
        	    xAxis: [
        	        {
        	            type: 'category',
        	            data: week,
        	            axisLabel: {                                           
        	            	interval:0,                                           
        	            	rotate:20                                        
        	            	},
        
        	            axisPointer: {
        	                type: 'shadow'
        	            }
        	        }
        	    ],
        	    yAxis: [
        	        {
        	            type: 'value',
        	            name: 'Input Qty',
        	            min: 0,
        	            max: 60000,
        	            interval: 6000,
        	            axisLabel: {
        	                formatter: '{value}'
        	            }
        	        },
        	        {
        	            type: 'value',
        	            name: 'Scrap Rate',
        	            min: 0,
        	            max: 6,
        	            interval: 0.6,
        	            axisLabel: {
        	                formatter: '{value}%'
        	            }
        	        }
        	    ],
        	    series: [
        	        {
        	            name: 'Scrap',
        	            type: 'bar',
        	            data: scrap
        	        },
        	        {
        	            name: 'Input',
        	            type: 'bar',
        	            data: Input
        	        },
        	        {
        	            name: 'Scrap rate',
        	            type: 'line',
        	            yAxisIndex: 1,
        	            data: rate
        	        } 
        	    ]
        	};
        ProcessmyChart.setOption(option);
        }

    
    
    
    // 每周报废FPC方法——————————————————————————————————————————————————————————————————————————
    function getFPCWeek(data){
    	key=[];
    	for(var i=0;i<data.length;i++){
    		key[i] = "w"+data[i].weeks.substring(4);
    	}
    	return key ;
    }
    function getFPCInput(data){
    	key=[];
    	for(var i=0;i<data.length;i++){
    		key[i] = data[i].input;
    	}
    	return key ;
    }
    function getFPCScrap(data){ 	
    	key=[];
    	for(var i=0;i<data.length;i++){
    		key[i] = data[i].scrap;
    	}
    	return key ;
    }
    
    function getFPCScrapRate(data){ 	
    	key=[];
    	for(var i=0;i<data.length;i++){
    		key[i] = (((data[i].scrap) / (data[i].input))*100).toFixed(2);
    	}
    
    	return key ;
    }
        var FPCmyChart = echarts.init(document.getElementById('main2'));
        function setOption_FPCScrap(week,Input,scrap,rate){		
        option = {
        		   title: {
                       text: 'FPC'
                   },
        	    tooltip: {
        	        trigger: 'axis',
        	        axisPointer: {
        	            type: 'cross',
        	            crossStyle: {
        	                color: '#999'
        	            }
        	        }
        	    },
        	    toolbox: {
        	        feature: {
        	            dataView: {show: true, readOnly: false},
        	            magicType: {show: true, type: ['line', 'bar']},
        	            restore: {show: true},
        	            saveAsImage: {show: true}
        	        }
        	    },
        	    legend: {
        	        data: ['scrap', 'Input', 'Scrap rate']
        	    },
        	    xAxis: [
        	        {
        	            type: 'category',
        	            data: week,
        	            axisPointer: {
        	                type: 'shadow'
        	            }
        	        }
        	    ],
        	    yAxis: [
        	        {
        	            type: 'value',
        	            name: 'Input Qty',
        	            min: 0,
        	            max: 100000,
        	            interval: 10000,
        	            axisLabel: {
        	                formatter: '{value}'
        	            }
        	        },
        	        {
        	            type: 'value',
        	            name: 'Scrap Rate',
        	            min: 0,
        	            max: 1,
        	            interval: 0.1,
        	            axisLabel: {
        	                formatter: '{value}%'
        	            }
        	        }
        	    ],
        	    series: [
        	        {
        	            name: 'Scrap',
        	            type: 'bar',
        	            data: scrap
        	        },
        	        {
        	            name: 'Input',
        	            type: 'bar',
        	            data: Input
        	        },
        	        {
        	            name: 'Scrap rate',
        	            type: 'line',
        	            yAxisIndex: 1,
        	            data: rate
        	        } 
        	    ]
        	};
        FPCmyChart.setOption(option);
        }

    
    
    
    
    // 每周报废方法——————————————————————————————————————————————————————————————————————————
    function getWeek(data){
    	key=[];
    	for(var i=0;i<data.length;i++){
    		key[i] = "w"+data[i].weeks.substring(4);
    	}
    	return key ;
    }
    function getInput(data){
    	key=[];
    	for(var i=0;i<data.length;i++){
    		key[i] = data[i].input;
    	}
    	return key ;
    }
    function getScrap(data){ 	
    	key=[];
    	for(var i=0;i<data.length;i++){
    		key[i] = data[i].scrap;
    	}
    	return key ;
    }
    
    function getScrapRate(data){ 	
    	key=[];
    	for(var i=0;i<data.length;i++){
    		key[i] = (((data[i].scrap) / (data[i].input))*100).toFixed(2);
    	}

    	return key ;
    }
        var DailymyChart = echarts.init(document.getElementById('main'));
        function setOption_DailyScrap(week,Input,scrap,rate){		
        option = {
        		   title: {
                       text: 'Card'
                   },
        	    tooltip: {
        	        trigger: 'axis',
        	        axisPointer: {
        	            type: 'cross',
        	            crossStyle: {
        	                color: '#999'
        	            }
        	        }
        	    },
        	    toolbox: {
        	        feature: {
        	            dataView: {show: true, readOnly: false},
        	            magicType: {show: true, type: ['line', 'bar']},
        	            restore: {show: true},
        	            saveAsImage: {show: true}
        	        }
        	    },
        	    legend: {
        	        data: ['scrap', 'Input', 'Scrap rate','Target']
        	    },
        	    xAxis: [
        	        {
        	            type: 'category',
        	            data: week,
        	            axisPointer: {
        	                type: 'shadow'
        	            }
        	        }
        	    ],
        	    yAxis: [
        	        {
        	            type: 'value',
        	            name: 'Input Qty',
        	            min: 0,
        	            max: 90000,
        	            interval: 9000,
        	            axisLabel: {
        	                formatter: '{value}'
        	            }
        	        },
        	        {
        	            type: 'value',
        	            name: 'Scrap Rate',
        	            min: 0,
        	            max: 10,
        	            interval: 1,
        	            axisLabel: {
        	                formatter: '{value}%'
        	            }
        	        }
        	    ],
        	    series: [
        	        {
        	            name: 'Scrap',
        	            type: 'bar',
        	            data: scrap
        	        },
        	        {
        	            name: 'Input',
        	            type: 'bar',
        	            data: Input
        	        },
        	        {
        	            name: 'Scrap rate',
        	            type: 'line',
        	            yAxisIndex: 1,
        	            data: rate
        	        },
        	        {
        	            name: 'Target',
        	            type: 'line',
        	            yAxisIndex: 1,
        	            data: [5,5,5,5,5,5,5,5,5,5,5,5,5]
        	        }
        	    ]
        	};
        DailymyChart.setOption(option);
        }
   
       
    </script>

</body>
</html>